<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能简历展示系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
        }
        header {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
        }
        .profile-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 30px;
        }
        .profile-text {
            flex: 1;
        }
        .scrape-box {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 30px;
        }
        input[type="text"] {
            width: 70%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #45a049;
        }
        .section {
            margin-bottom: 25px;
        }
        h2 {
            color: #2c3e50;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        .content {
            margin-left: 20px;
        }
        .project {
            margin-bottom: 15px;
        }
        #loading {
            display: none;
            color: #4CAF50;
            font-weight: bold;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <div class="scrape-box">
        <h2>简历爬取功能</h2>
        <input type="text" id="resumeUrl" placeholder="输入在线简历URL，例如: http://example.com/resume">
        <button onclick="scrapeResume()">爬取简历</button>
        <span id="loading">正在爬取中...</span>
        <div id="error" class="error"></div>
    </div>

    <header>
        <img id="profileImage" src="{{ url_for('static', filename='default.jpg') }}" alt="个人照片" class="profile-img">
        <div class="profile-text">
            <h1 id="name">邝颖颖</h1>
            <p id="title">求职意向：Java开发工程师</p>
        </div>
    </header>

    <div class="contact-info">
        <h2>联系方式</h2>
        <div class="content" id="contact">
            <p>电话: 182-8937-9712</p>
            <p>邮箱: kuang-yingying@example.com</p>
            <p>GitHub: <a href="https://gitee.com/kuang-yingying" target="_blank">gitee.com/kuang-yingying</a></p>
        </div>
    </div>

    <section class="section">
        <h2>教育背景</h2>
        <div class="content" id="education">
            <p><strong>XX职业技术学院</strong> - 软件技术专业</p>
            <p>2019.09 - 2023.06</p>
            <p>主修课程: Java编程、数据库原理、Web开发、数据结构与算法</p>
        </div>
    </section>

    <section class="section">
        <h2>技能专长</h2>
        <div class="content" id="skills">
            <ul>
                <li>熟练掌握Java、Python编程语言</li>
                <li>熟悉Spring Boot、MyBatis等开发框架</li>
                <li>熟悉MySQL、Oracle数据库</li>
                <li>熟悉HTML、CSS、JavaScript等前端技术</li>
                <li>熟悉Linux操作系统和Git版本控制工具</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>项目经验</h2>
        <div class="content" id="projects">
            <div class="project">
                <h3>在线图书管理系统</h3>
                <p><strong>项目时间:</strong> 2022.03 - 2022.06</p>
                <p><strong>项目描述:</strong> 基于Spring Boot和MySQL开发的图书管理系统，支持图书的增删改查、借阅归还等功能。</p>
                <p><strong>个人职责:</strong> 负责后端开发，设计数据库表结构，实现RESTful API接口。</p>
                <p><strong>技术栈:</strong> Java, Spring Boot, MySQL, HTML, CSS, JavaScript</p>
            </div>
            <div class="project">
                <h3>个人博客网站</h3>
                <p><strong>项目时间:</strong> 2021.09 - 2021.12</p>
                <p><strong>项目描述:</strong> 使用Django框架开发的个人博客网站，支持文章发布、评论、用户注册登录等功能。</p>
                <p><strong>个人职责:</strong> 负责前后端开发，部署到Linux服务器。</p>
                <p><strong>技术栈:</strong> Python, Django, SQLite, HTML, CSS, JavaScript</p>
            </div>
        </div>
    </section>

    <section class="section">
        <h2>获奖情况</h2>
        <div class="content" id="awards">
            <ul>
                <li>2022年校级编程大赛一等奖</li>
                <li>2021年国家励志奖学金</li>
            </ul>
        </div>
    </section>

    <section class="section">
        <h2>自我评价</h2>
        <div class="content" id="selfEvaluation">
            <p>热爱编程，具备扎实的Java开发基础，熟悉常见开发框架和工具。有较强的学习能力和团队合作精神，能够快速适应新技术和新环境。资深数字营销专家，8年互联网行业经验，专注品牌增长战略与数据化运营。擅长从0到1构建用户增长体系，主导过3个千万级流量项目，具备跨部门协同与国际化团队管理经验。以"数据驱动创意"为核心方法论，追求美学与商业价值的平衡</p>
        </div>
    </section>

    <footer>
        <p>© 2023 智能简历展示系统. 版权所有.</p>
    </footer>

    <script>
        function scrapeResume() {
            const url = document.getElementById('resumeUrl').value.trim();
            if (!url) {
                document.getElementById('error').textContent = '请输入有效的URL';
                return;
            }
            
            document.getElementById('error').textContent = '';
            document.getElementById('loading').style.display = 'inline';
            
            fetch('/scrape', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `url=${encodeURIComponent(url)}`
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('loading').style.display = 'none';
                
                if (data.status === 'success') {
                    // 更新页面内容
                    document.getElementById('name').textContent = data.data.name || '未提供姓名';
                    document.getElementById('title').textContent = data.data.title || '未提供求职意向';
                    document.getElementById('contact').innerHTML = data.data.contact.split('\n').map(line => `<p>${line}</p>`).join('');
                    document.getElementById('education').innerHTML = data.data.education.split('\n').map(line => `<p>${line}</p>`).join('');
                    document.getElementById('skills').innerHTML = `<ul>${data.data.skills.split('\n').map(skill => `<li>${skill}</li>`).join('')}</ul>`;
                    
                    // 更新项目经验
                    const projectsDiv = document.getElementById('projects');
                    projectsDiv.innerHTML = data.data.projects.map(project => 
                        `<div class="project">${project.split('\n').map(line => `<p>${line}</p>`).join('')}</div>`
                    ).join('');
                    
                    // 更新获奖情况
                    document.getElementById('awards').innerHTML = `<ul>${data.data.awards.split('\n').map(award => `<li>${award}</li>`).join('')}</ul>`;
                    document.getElementById('selfEvaluation').innerHTML = `<p>${data.data.self_evaluation}</p>`;
                    
                    // 更新图片
                    if (data.data.image_url) {
                        document.getElementById('profileImage').src = data.data.image_url;
                    }
                } else {
                    document.getElementById('error').textContent = '爬取失败: ' + data.message;
                }
            })
            .catch(error => {
                document.getElementById('loading').style.display = 'none';
                document.getElementById('error').textContent = '请求失败: ' + error.message;
            });
        }
    </script>
</body>
</html>